<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>消息列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
				<!-- 搜索用户框 -->
                <el-input v-model="query.param.message" placeholder="请输入消息内容" class="handle-input mr10"></el-input>
				<!-- 搜索按钮 -->
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addNews">发布系统消息</el-button>
            </div>
            <!-- 产品列表 -->   
            <el-table 
                :data="tableData"
                border 
                class="table" 
                ref="multipleTable" 
                header-cell-class-name="table-header" 
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
                <el-table-column prop="aname" label="发送用户" width="180" align="center"></el-table-column>
                <el-table-column prop="bname" label="接收人用户" width="180" align="center"></el-table-column>
                <el-table-column prop="message" label="消息内容" align="center"></el-table-column>
                <el-table-column prop="jumpParam" label="消息跳转参数" align="center"></el-table-column>
                <el-table-column prop="createTime" label="发送时间" align="center"></el-table-column>
            </el-table>
			<!-- 页码功能 -->
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageNum"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="editVisible" width="85%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="发送人">
                    <el-select v-model="form.sendUserId" :disabled="!form.id?false:true">
                        <el-option v-for="items in userTypes" :key="items.sendUserId" :label="items.nickName":value="items.id"></el-option>
                    </el-select>
                </el-form-item>                
                <el-form-item label="接收人">
                    <el-select v-model="form.userType" :disabled="!form.id?false:true">
                        <el-option v-for="item in userTypes" :key="item.receiveUserId" :label="item.nickName":value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="消息内容">
                    <el-input v-model="form.message" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="消息跳转参数">
                    <el-input v-model="form.jumpParam" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateClick(form)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<!-- 功能实现 -->
<script>
import md5 from 'js-md5';
// 富文本
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js'
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                    pageNum: 1,
                    pageSize: 10,
                    param: {
                        message:""
                    }
                },
            title:"编辑",
            ortool:false,
            form:{},
            editVisible:false,    
            tableData: [],
            multipleSelection: [],
            pageTotal: 0,
            id: -1,
            dropDownData:[],
            userTypes:[],
            delFlag:'0'
        };
    },
    created() {
        this.tablist();
    },
    methods: {
		tablist() {
			messageList(this.query).then(res => {
                if(res.returnCode == 200){
                    this.tableData = res.data.list;
                    this.pageTotal = res.data.total;
                }else{
                    this.tableData = null;
                    this.pageTotal = 0;
                }
			})
        },
        addNews(){
            this.title="新增";
            this.ortool=false;
            userDown().then(res => {
                if(res.returnCode == 200){
                    this.userTypes = res.data;
                }
            });
            this.editVisible = true;
        },
        handleEdit(index, row) {
                this.title = '编辑';
                this.idx = index;
                this.details(row.signInfoId);
        },
        details(id){
            integralDetails(id).then(res => {
                if(res.returnCode == 200){
                    var row=res.data;
                    this.form = row;                   
                    this.ortool=false;
                    this.editVisible = true;
                }else{
                     
                }
            })
        },
        updateClick(row){
            if(row.signInfoId){
                this.update(row);
            }else{
                this.add(row);
            }
         },
         update(row){
            integralUpdate({
                signInfoId:row.signInfoId,
                ruleName:row.ruleName,
                signInfoType:row.signInfoType,
                ruleKey:row.ruleKey,
                ruleGradeJson:row.ruleGradeJson,
                delFlag:row.delFlag
               }).then(res => {
                    if(res.returnCode === 200)this.tablist()
                    this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                    this.editVisible=false;
                }, err => {
                    console.log('err--', err)
                })
            this.$set(this.tableData, this.idx, this.form);
        },
        add(row){
            messageAdd({
                sendUserId:row.sendUserId,
                receiveUserId:row.userType,
                message:row.message,
                jumpParam:row.jumpParam
            }).then(res => {
                if(res.returnCode === 200)this.tablist()
                this.$message.success(`新增商品成功`);
                this.editVisible=false;
            }, err => {
                    console.log('err--', err)
            })  
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageNum', 1);
            this.tablist();
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
         // 分页导航
        handlePageChange(val) {
                this.$set(this.query, 'pageNum', val);
                this.tablist();
        },
        
    }
};
</script>
<!-- css样式实现 -->
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
